<template>
  <div class="cart">
    <NavBar class="nav-bar">
      <div slot="item-center">购物车({{cartListLength}})</div>
    </NavBar>
    <Scroll class="content" ref="Scroll">
        <CartListItem v-for="(item,index) in cartLists" :key="index" :item-info="item" />
    </Scroll>
    <BomBar class="BomBar"/>
  </div>
</template>

<script>
    import NavBar from "../../components/common/navbar/NavBar";
    import Scroll from "../../components/common/scroll/Scroll";
    import BomBar from "./childComp/BomBar";
    import CartListItem from "./childComp/CartListItem";

    import {debounce} from "../../common/utils";


    import {mapGetters} from "vuex" //vuex辅助函数


    export default {
        name: "Cart",
        components: {
            NavBar,
            Scroll,
            BomBar,
            CartListItem
        },
        data() {
            return {}
        },
        computed: {
            ...mapGetters(['cartListLength', 'cartLists'])
        },
        methods: {
        },
        created() {
            // 展示购物车列表信息
        },
        activated(){
            this.$refs.Scroll.refresh()
        }
    }
</script>

<style scoped>
  .cart {
    height: 100vh;
  }

  .nav-bar {
    position: relative;
    background-color: var(--color-high-text);
    color: white;
  }

  .content {
    position: relative;
    height: calc(100% - 44px - 49px - 30px);
  }

</style>
